<template>
	<wsPage :title="this.pageTitle + '优惠券记录'">
		<div slot="page_operate">
			<Button type="ghost" @click="goBack"><Icon type="android-close"></Icon><span>关闭</span></Button>
		</div>
		<wsSmPanel :page="table1.page" @simple-query="query" @page-change="query" v-if = "this.queryForm.usedType == '1'">
			<!-- <div slot="list_operate">
				<Button type="ghost" :disabled="!isTableSelected" @click="batchDelCouponRecord">批量删除</Button>
			</div> -->
			<div slot="list_data">
				<Table border 
					:columns="table1.columns" 
					:data="table1.data">
				</Table>
			</div>
		</wsSmPanel>

		<wsSmPanel :page="table2.page" @simple-query="query" @page-change="query" v-if = "this.queryForm.usedType == '2'">
			<!-- <div slot="list_operate">
				<Button type="ghost" :disabled="!isTableSelected" @click="batchDelCouponRecord">批量删除</Button>
			</div> -->
			<div slot="list_data">
				<Table border 
					:columns="table2.columns" 
					:data="table2.data">
				</Table>
			</div>
		</wsSmPanel>

	</wsPage>
</template>

<script>
	import Util from '../../../common/util.js';
	export default {
		data() {
			return {
				pageTitle: '已领取',
                //条件查询
				queryForm: {
					couponId:null,
					usedType: '1'
				},
				table1: {
					columns: [{
						title: '优惠码',
                        key: 'code',
                        width: 200,
                        align: 'center',
                        fixed: 'left'
					},{
						title: '领取会员',
                        key: 'memberName',
                        align: 'center'
					},{
						title: '当前状态',
                        key: 'usedType',
                        align: 'center',
                        render: (h, params) => {
                        	return h('Tag', {
                        		props: {
                        			type: 'border',
                        			color: params.row.usedType == '1' ? 'yellow' : params.row.usedType == '2' ? 'blue' : 'red'
                        		}
                        	}, this.initUsedType(params.row.usedType))
                        }
					},{
						title: '领取时间',
                        key: 'createDate',
                        align: 'center'
					}],
					data: [],
					page: {
						total: 0, //总条数
						pageNum: 1, //当前页
						pageSize: 10 //每页显示条数
					},
					selection: [], //选中
				},
				table2: {
					columns: [{
						title: '优惠码',
                        key: 'code',
                        width: 200,
                        align: 'center',
                        fixed: 'left'
					},{
						title: '领取会员',
                        key: 'memberName',
                        align: 'center'
					},{
						title: '当前状态',
                        key: 'usedType',
                        align: 'center',
                        render: (h, params) => {
                        	return h('Tag', {
                        		props: {
                        			type: 'border',
                        			color: params.row.usedType == '1' ? 'yellow' : params.row.usedType == '2' ? 'blue' : 'red'
                        		}
                        	}, this.initUsedType(params.row.usedType))
                        }
					},{
						title: '使用订单编号',
                        key: 'orderSn',
                        align: 'center'
					},{
						title: '使用时间',
                        key: 'usedDate',
                        align: 'center'
					}],
					data: [],
					page: {
						total: 0, //总条数
						pageNum: 1, //当前页
						pageSize: 10 //每页显示条数
					},
					selection: [], //选中
				}
			}
		},
		computed: {
			/**
			 * 表格行是否为选中状态
			 */
			isTableSelected() {
				return this.table.selection.length > 0;
			},
			isEdit() {
		      return !Util.vad.isBlank(this.propertyModal.form.id);
		    }
		},
		mounted() {
			this.init();
		},
		methods: {
			initUsedType(usedType){
				if(usedType==1){
					return '未使用';
				};
				if(usedType==2){
					return '已使用';
				};
				if(usedType==3){
					return '已过期';
				};
			},
			init() {
				if(this.$route.query.id != null && this.$route.query.id != '') {
					this.queryForm.couponId = this.$route.query.id;
				} 
				if(this.$route.query.type != null && this.$route.query.type != ''){
					this.queryForm.usedType = this.$route.query.type;	
					if(this.queryForm.usedType == '1'){
						this.pageTitle='已领取';
					} else {
						this.pageTitle='已使用';
					}
				}
				this.query();
			},
			/**
			 * 表单查询
			 */
			query() {
				let pageSize;
				let pageNum;
				if(this.queryForm.usedType == '1'){
					pageSize = this.table1.page.pageSize;
				 	pageNum = this.table1.page.pageNum;
				} else {
					pageSize = this.table2.page.pageSize;
				 	pageNum = this.table2.page.pageNum;
				}
				 
				const _this = this;
				_this.axios.post('/ws/ms/couponRecords?pageNum=' + pageNum + '&pageSize=' + pageSize, _this.queryForm).then(response => {
					var res = response.data;
					var resMeta = res.meta;
					if (0 == resMeta.code) {
						if(_this.queryForm.usedType == '1'){
							_this.build1Data(res.data);
						} else {
							_this.build2Data(res.data);
						}
					} else {
						_this.$Message.warning(resMeta.message);
					}
				});
			},
			/**
			 * 构建表格数据
			 */
			build1Data(data_){
				this.table1.data = data_.list;
				this.table1.page.total = data_.total;
			},
			build2Data(data_){
				this.table2.data = data_.list;
				this.table2.page.total = data_.total;
			},
			/**
			 * 表格选择变更事件
			 */
			/*tableSelected(selection_) {
				this.table.selection = selection_;
			},*/
			/**
			 * 批量删除提示
			 */
			batchDelCouponRecord() {
				const _this = this;
				this.$confirm({
        			content: '你确认删除选中数据吗?',
        			onOk: function() {
        				_this.batchDelRow();
        			}
        		});
			},
			/**
			 * 批量删除
			 */
			batchDelRow(){
				let ids = [];
				this.table.selection.forEach((item) => {
			      ids.push(item.id);
			    });
				if(ids.length < 1){
					this.$Message.warning('请选择要删除的优惠券使用记录');
					return;
				}
				const _this = this;
				this.axios.post('/ws/ms/couponRecords/batchDel' , ids).then(function(response) {
		      		let res = response.data;
					if(0 === res.meta.code) {
						_this.$Message.success(res.meta.message);
						_this.query();
					} else {
						let message_ = res.meta.message;
						_this.$Message.warning('删除优惠券使用记录失败:' + message_);
					}	
			    });	
			},
			/**
			 * 跳转到优惠券列表页面
			 */
			goBack(){
				this.$router.push({name:'ms_coupon_list'});
			}			
		}
	}
</script>

<style scoped>
	.ws-form-select {
		width: 162px;
	}
</style>